<!DOCTYPE html>
<html lang="en" data-theme="blue">
  <head>
    <title>Themepro</title>    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/themepro/index.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/red.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/blue.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/dark.css" />          
    <script src="/themepro/index.umd.js"></script>
    <style>  
        .spacing-input{
            cursor:pointer;
        }
        .box{
            width: 80%;
            border: var(--auto-border);
            padding: var(--auto-padding);
            background:var(--auto-panel-bgcolor);
        }
    </style> 
  </head>
  <body>
    <div style="background:var(--t-theme-bgcolor);text-align:center">           
        <div id="spacing" style="display:flex;gap:0.5em;margin:1rem;padding:0.5rem;text-align:center;justify-content:center">             
                <label class="spacing-input"><input type="radio" name="spacing" value="none" >none</label>
                <label class="spacing-input"><input type="radio" name="spacing" value="x-small" >x-small</label>                
                <label class="spacing-input"><input type="radio" name="spacing" value="small"> small</label>
                <label class="spacing-input"><input type="radio" name="spacing" value="medium" checked> medium</label>              
                <label class="spacing-input"><input type="radio" name="spacing" value="large"> large</label>
                <label class="spacing-input"><input type="radio" name="spacing" value="x-large"> x-large</label>              
        </div> 
        <div style="line-height:var(--auto-line-height);padding:1rem;display:flex;flex-direction: column;align-items:center;gap:1rem">             
            <div class="box" style="margin:var(--auto-spacing);padding:var(--auto-spacing);background:var(--t-color-primary-3);color:#888">--auto-spacing</div>            
            <div class="box"  style="padding:var(--t-spacing-x-small);margin:var(--t-spacing-x-small)">--t-spacing-x-small</div> 
            <div class="box"  style="padding:var(--t-spacing-small);margin:var(--t-spacing-small)">--t-spacing-small</div>
            <div class="box"  style="padding:var(--t-spacing-medium);margin:var(--t-spacing-medium)">--t-spacing-medium</div>
            <div class="box"  style="padding:var(--t-spacing-large);margin:var(--t-spacing-large)">--t-spacing-large</div>
            <div class="box"  style="padding:var(--t-spacing-x-large);margin:var(--t-spacing-x-large)">--t-spacing-x-large</div>
        </div>
    </div>        
    <script>
        const sizes = document.querySelector("#spacing")
        sizes.addEventListener('change', (event) => {
            const spacing = document.querySelector('input[type=radio][name=spacing]:checked')
            ThemePro.spacing = spacing.value
        });
    </script>
  </body>
</html>


